<template>
<div class="dashboard-container">
    <div class="adminContent">
        <div class="title">考勤管理</div>
        <div class="butList">
            <div @click="addHander('add')" style="display: inline-block"><span>+</span> 新增考勤组</div>
        </div>
        <div class="cont">
            <div class="tableCont">
                <el-table ref="multipleTable" :data="tableData" style="width: 100%">
                    <el-table-column align="center" label="名称" width="120">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
<!--                    <el-table-column align="center" label="人数" prop="memberNum" width="120" />-->
                    <el-table-column align="center" prop="name" label="考勤时间">
                        <template slot-scope="scope">
                            <p>每周 {{workdays(scope.row.workdays, 0)}} 休息</p>
                            <p>每周：{{workdays(scope.row.workdays, 1)}} {{scope.row.startWorkTime}} - {{scope.row.offWorkTime}} </p>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                            <span class="actLab" @click="delHander(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageList">
                    <el-pagination v-if="total>pageSize" layout="prev, pager, next" @current-change="handlePageChange" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" center @close="closeHandle">
            <div class="editCont">
                <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="考勤组名称" prop="name" size="mini" style="width: 315px;">
                        <el-input v-model="ruleForm.name" placeholder="请输入考勤组名称"></el-input>
                    </el-form-item>
                    <el-form-item label="参与考勤人员" prop="region">
                        <Cascader v-on:getValue="getValue" sel-style="min-width:175px" :dialogVisible="dialogVisible" :checkListDataes="ruleForm.participates"></Cascader>
                    </el-form-item>
                    <el-form-item label="无需考勤人员" prop="region">
                        <Cascader v-on:getValue="getValueUn" sel-style="min-width:175px" :dialogVisible="dialogVisible" :checkListDataes="ruleForm.notParticipates"></Cascader>
                    </el-form-item>
                  <!--  <el-form-item label="考勤组负责人" prop="region">
                        <el-select v-model="ruleForm.managerId" size="mini" placeholder="请选择考勤组负责人">
                            <el-option v-for="item in memberList" :label="item.username" :key="item.id" :value="item.id"></el-option>
                        </el-select>

                    </el-form-item>-->
                    <el-form-item label="设置上下班时间" size="mini" style="width: 840px;">
                        <div style="height: 40px;">
                            <el-col :span="5">
                                <el-time-picker placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" v-model="ruleForm.startWorkTime" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" style="text-align: center" :span="0.5">-</el-col>
                            <el-col :span="5">
                                <el-time-picker placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" v-model="ruleForm.offWorkTime" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col :span="3" style="text-align:center">休息时间:</el-col>
                            <el-col :span="5">
                                <el-time-picker placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" v-model="ruleForm.startNoonRestTime" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" style="text-align: center" :span="0.5">-</el-col>
                            <el-col :span="5">
                                <el-time-picker placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" v-model="ruleForm.endNoonRestTime" style="width: 100%;"></el-time-picker>
                            </el-col>
                        </div>
                        <div style="margin-top: 5px;">
                            <el-checkbox v-model="startWorkTime" label="允许迟到分钟数" name="type"></el-checkbox>
                            <span v-if="startWorkTime"><input type="number" v-model="ruleForm.allowLateMinutes" placeholder="请输入" class="miniInput"> 分</span>
                        </div>
                        <div style="margin-top: 5px;">
                            <el-checkbox v-model="offWorkTime" label="旷工迟到分钟数" name="type"></el-checkbox>
                            <span v-if="offWorkTime"><input type="number" v-model="ruleForm.lateMinutes" placeholder="请输入" class="miniInput"> 分</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="工作日设置" prop="type">
                        <el-checkbox-group v-model="ruleForm.workdays">
                            <el-checkbox label="1" name="1">周一</el-checkbox>
                            <el-checkbox label="2">周二</el-checkbox>
                            <el-checkbox label="3">周三</el-checkbox>
                            <el-checkbox label="4">周四</el-checkbox>
                            <el-checkbox label="5">周五</el-checkbox>
                            <el-checkbox label="6">周六</el-checkbox>
                            <el-checkbox label="7">周日</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特殊日期" prop="type">
                        <div><span class="addLab" @click="workTimeSet('add', 'must')">点击添加</span> 必须打卡的日期</div>
                        <div v-show="mustCardsDateSt">
                            <el-date-picker v-model="mustCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期"> </el-date-picker>
                            <span class="addLab" @click="addWorkDate('must')">{{active}}</span>
                        </div>
                        <div class="table" v-if="mustCardsDateItem.length > 0">
                            <div class="tbHead">
                                <div>必须打卡日期</div>
                                <div>操作</div>
                            </div>
                            <div class="tbTr" v-for="item in mustCardsDateItem" :key="item.id">
                                <div>{{moment(Number(item)).format('YYYY-MM-DD')}}</div>
                                <div> <span class="act" @click="workTimeSet('edit', 'must', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'must',item)">删除</span> </div>
                            </div>
                        </div>
                        <div> <span class="addLab" @click="workTimeSet('add', 'non')">点击添加</span> 不用打卡的日期</div>
                        <div v-show="nonCardsDateSt">
                            <el-date-picker v-model="nonCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期"> </el-date-picker>
                            <span class="addLab" @click="addWorkDate('non')">{{active}}</span>
                        </div>
                        <div class="table" v-if="nonCardsDateItem.length > 0">
                            <div class="tbHead">
                                <div>不用打卡日期</div>
                                <div>操作</div>
                            </div>
                            <div class="tbTr" v-for="item in nonCardsDateItem" :key="item.id">
                                <div>{{moment(Number(item)).format('YYYY-MM-DD')}}</div>
                                <div> <span class="act" @click="workTimeSet('edit', 'non', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'non', item)">删除</span> </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="考勤方式" prop="type">
                        <div><span class="address" @click="mapOpenHander">添加考勤地点</span> 有效范围 <input class="miniInput" v-model="ruleForm.addressRange" type="text" size="mini"></input> 米</div>
                    </el-form-item>
                    <div class="map" v-if="mapOpen">
                        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
                        <el-amap vid="amapDemo" :center="mapCenter" :plugin="plugin" :zoom="12" class="amap">
                            <div v-if="markers.length>0">
                                <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.name">
                                    <span @click="addMarker(marker)" class="markerLab"><i class="icon">&#xe66b;</i></span>
                                </el-amap-marker>
                            </div>
                        </el-amap>
                        <div class="mapFoot">
                            <div>
                                <div style="margin-bottom: 15px;">地址名称：<input type="text" placeholder="请输入" v-model="mapName"></div>
                                <div>详细地址：{{mapAddress}}</div>
                            </div>
                            <div class="botItem">
                                <span class="cancelSub" @click="() => mapOpen = false">取消</span>
                                <span class="confirmSub" @click="mapInfoHander() ">确定</span>
                            </div>
                        </div>
                    </div>
                    <div class="addressItems" v-if="mapAdderssItems.length > 0">
                        <div class="addTit"><span class="icon">&#xe667;</span> 考勤地点</div>
                        <div class="addItems" v-for="(item, index) in mapAdderssItems" :key="index">
                            <div>
                                <p><i class="icon">&#xe667;</i>{{item.addressName}}</p>
                                <p class="addDes">{{item.address}}</p>
                            </div>
                            <div class="del" @click="delMapInfoHander"><span>删除</span></div>
                        </div>
                    </div>
                    <div class="dialog-footer">
                        <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitSetAdmin('ruleForm')">保存</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <!--      // 删除-->
        <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
            <div style="text-align: center">
                <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
                <p>确认后该信息将被删除，</p>
                <p>并不可恢复，是否确认删除？</p>
            </div>
            <div class="submitBox">
                <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
                <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Cascader from './../../components/Cascader'

  export default {
    name: 'Dashboard',
    data() {
        return {
            qurenDel: false,
            delId: '',
            dialogVisible: false,
            loading: false,
            title: '添加考勤组',
            tableData: [],
            active: '添加',
            total: 0,
            page: 1,
            pageSize: 8,
            mustCardsDate: '',
            mustCardsDateSt: false,
            mustCardsDateItem: [],
            nonCardsDate: '',
            nonCardsDateSt: false,
            nonCardsDateItem: [],
            value: '',
            options: [],
            adminListData: [],
            memberList: [],
            checkList: [],
            checkListes: [],
            cardsDate: '',
            noCardsDate: '',
            startWorkTime: '',
            offWorkTime: '',
            chgCardsDateNum: '',
            formDataInit: {
                name: '',
                participates: [],
                notParticipates: [],
                managerId: '',
                managerType: '1',
                startWorkTime: '',
                offWorkTime: '',
                startNoonRestTime: '',
                endNoonRestTime: '',
                allowLateMinutes: '',
              lateMinutes: '',
                workdays: [],
                extraConfig: [],
                lat: '',
                lng: '',
              addressRange: 300,
                addressName: '',
                address: '',
                id: ''
            },
            ruleForm: {},
            zoom: 10,
            markers: [],
            searchOption: {
                city: '北京',
                citylimit: false
            },
            mapCenter: [116.39, 39.9],
            plugin: [{
                pName: 'ToolBar'
            }],
            poit: [],
            mapOpen: false,
            mapName: '',
            mapAddress: '',
            mapAdderssItems: [],
        }
    },
    computed: {
        ...mapGetters([
            'name'
        ]),
    },
    components: {
        Cascader
    },
    created() {
        this.init()
        this.getMemberList()
        this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit))
    },
    methods: {
        init() {
            this.$store.dispatch('attendance/getAattendGroupLilsAct', {
                page: this.page,
                pageSize: this.pageSize
            }).then((res) => {
                this.tableData = res.rows
                this.total = Number(res.total)
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        getAdminList() {
            this.$store.dispatch('company/getCompanyAdminListAct').then((res) => {
                this.adminListData = res
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        getMemberList() {
            this.$store.dispatch('organization/getSimMemberAct', {
                includeSub: 0
            }).then((res) => {
                this.memberList = res.rows
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        getValue(val) {
            console.log(3333, val)
            this.ruleForm.participates = val.map(n => {
                return {
                    objectId: n.id,
                    objectName: n.name,
                    objectType: n.type
                }
            })
        },
        getValueUn(val) {
            this.ruleForm.notParticipates = val.map(n => {
                return {
                    objectId: n.id,
                    objectName: n.name,
                    objectType: n.type
                }
            })
        },
        closeHandle() {
            console.log('关闭了')
            this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit))
        },
        // 特殊日期处理
        workTimeSet(st, tg, dat) {
            if (tg == 'must') {
                this.nonCardsDateSt = false
                if (st == 'add') {
                    this.mustCardsDateSt = true
                    this.active = '添加'
                    this.mustCardsDate = ''
                } else if (st == 'edit') {
                    this.mustCardsDateSt = true
                    this.active = '修改'
                    this.mustCardsDate = dat
                    this.chgCardsDateNum = this.mustCardsDateItem.indexOf(dat)
                } else if (st == 'del') {
                    const num = this.mustCardsDateItem.indexOf(dat)
                    this.mustCardsDateItem.splice(num, 1)
                }
            } else if (tg == 'non') {
                this.mustCardsDateSt = false
                if (st == 'add') {
                    this.nonCardsDateSt = true
                    this.active = '添加'
                    this.nonCardsDate = ''
                } else if (st == 'edit') {
                    this.nonCardsDateSt = true
                    this.active = '修改'
                    this.nonCardsDate = dat
                    this.chgCardsDateNum = this.nonCardsDateItem.indexOf(dat)
                } else if (st == 'del') {
                    const num = this.nonCardsDateItem.indexOf(dat)
                    this.nonCardsDateItem.splice(num, 1)
                }
            }
        },
        // 添加特殊日期
        addWorkDate(st) {
            if (st == 'must') {
                if (!this.mustCardsDate) {
                    this.$message.error('请先选择日期！')
                    return false
                }
                if (this.mustCardsDateItem.indexOf(this.mustCardsDate) != -1 || this.nonCardsDateItem.indexOf(this.mustCardsDate) != -1) {
                    this.$message.error('该日期已被选中,请重新调整！')
                    return
                }
                if (this.active == '修改') {
                    this.mustCardsDateItem.splice(this.chgCardsDateNum, 1, this.mustCardsDate)
                    this.mustCardsDateSt = false
                } else {
                    this.mustCardsDateItem.push(this.mustCardsDate)
                    this.mustCardsDateSt = false
                }
            } else {
                if (!this.nonCardsDate) {
                    this.$message.error('请先选择日期！')
                    return false
                }
                if (this.mustCardsDateItem.indexOf(this.nonCardsDate) != -1 || this.nonCardsDateItem.indexOf(this.nonCardsDate) != -1) {
                    this.$message.error('该日期已被选中,请重新调整！')
                    return
                }
                if (this.active == '修改') {
                    this.nonCardsDateItem.splice(this.chgCardsDateNum, 1, this.nonCardsDate)
                    this.nonCardsDateSt = false
                } else {
                    this.nonCardsDateItem.push(this.nonCardsDate)
                    this.nonCardsDateSt = false
                }
            }
        },
        addHander() {
            this.title = '添加考勤组'
            this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit))
          this.dialogVisible = true
        },
        // 编辑考勤组
        editerHander(row) {
            this.$store.dispatch('attendance/getAttendGroupInfoAct', {
                id: row.id
            }).then((res) => {
                if (!res.success) {
                    this.$message.error('信息获取失败，请稍后重试')
                    return
                }
                this.ruleForm = res.data
                this.startWorkTime = res.data.allowLateMinutes ? true : false
                this.offWorkTime = res.data.lateMinutes ? true : false
                let workArr = []
                res.data.workdays.forEach((n, i) => {
                    if (n == 1) {
                        workArr.push(String(i + 1))
                    }
                })
                this.ruleForm.workdays = workArr
                res.data.extraConfig.forEach(n => {
                    if (n.requiredAttend == 1) {
                        this.mustCardsDateItem = []
                        this.mustCardsDateItem.push(n.setDate)
                    } else if (n.requiredAttend == 0) {
                        this.nonCardsDateItem = []
                        this.nonCardsDateItem.push(n.setDate)
                    }
                })
                if (res.data.address) {
                    this.mapAdderssItems = [{
                        address: res.data.address,
                        addressName: res.data.addressName
                    }]
                }
                this.title = '编辑考勤组'
                this.dialogVisible = true
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        // 删除
        delHander(row) {
            this.delId = row.id
            this.qurenDel = true

        },
        confirmDel() {
            this.$store.dispatch('attendance/delAttendGroupInfoAct', {
                id: this.delId
            }).then((res) => {
                this.qurenDel = false
                this.$message.success('删除成功！')
                this.init()
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        // 分页
        handlePageChange(val) {
            this.page = val
            this.init()
        },
        //特殊日期处理
        cgData() {
            let dateArray = []
            const mustDate = this.mustCardsDateItem
            const nonDate = this.nonCardsDateItem
            if (mustDate && mustDate.length > 0) {
                mustDate.forEach(n => {
                    dateArray.push({
                        setData: this.moment(n).format('YYYY-MM-DD'),
                        requiredAttend: 1
                    })
                })
            }
            if (nonDate && nonDate.length > 0) {
                nonDate.forEach(n => {
                    dateArray.push({
                        setData: this.moment(n).format('YYYY-MM-DD'),
                        requiredAttend: 0
                    })
                })
            }
            return dateArray
        },
        // 提交
        submitSetAdmin() {

            let params = {
                ...this.ruleForm
            }
            params.extraConfig = this.cgData()
            params.workdays = this.workDaysComplate(params.workdays)
          //TODO 修改上班时间格式
          params.workdays =  params.workdays.join(",")
          console.log(params.workdays);
            params.extraConfig = this.extraConfigComplate()
            if (!params.name) {
                this.$message.error('请输入考勤组名称！')
                return false
            }
            // if (!params.managerId) {
            //     this.$message.error('请选择考勤组负责人！')
            //     return false
            // }
            if (!params.startWorkTime || !params.offWorkTime) {
                this.$message.error('请设置上下班时间！')
                return false
            }
            if (!params.startNoonRestTime || !params.endNoonRestTime) {
                this.$message.error('请设置休息时间！')
                return false
            }
            if (!params.addressRange) {
                this.$message.error('请添写考勤范围！')
                return false
            }
            if (!params.address) {
                this.$message.error('请添加考勤地点！')
                return false
            }
            const url = this.title == '添加考勤组' ? 'attendance/addAttendGroupAct' : 'attendance/putAttendGroupInfoAct'
            this.$store.dispatch(url, {
                ...params
            }).then((res) => {
                if(res.success){
                  this.$message.success('数据提交成功！')
                  this.init()
                  this.dialogVisible = false
                  this.adminListData = res
                  this.loading = false
                }
            }).catch(() => {
                this.loading = false
            })
        },
        addMarker(obj) {
            this.mapName = obj.name
            this.mapAddress = obj.address
            this.poit = obj.position
        },
        // 打开考勤地图
        mapOpenHander() {
            if (this.mapAdderssItems.length == 0) {
                this.mapOpen = true
                this.mapName = ''
                this.markers = []
                this.mapAddress = '请选择地点'
            } else {
                this.$message.error('已存在考勤地点，请删除后再添加')
            }
        },
        // 地图搜索
        onSearchResult(pois) {
            let latSum = 0;
            let lngSum = 0;
            if (pois && pois.length > 0) {
                pois.forEach(poi => {
                    let {
                        lng,
                        lat
                    } = poi;
                    lngSum += lng;
                    latSum += lat;
                    this.markers.push({
                        position: [poi.lng, poi.lat],
                        name: poi.name,
                        address: poi.address
                    });
                });
                let center = {
                    lng: lngSum / pois.length,
                    lat: latSum / pois.length
                };
                this.mapCenter = [center.lng, center.lat];
            } else {
                this.markers = []
            }
        },
        // 地理位置确定
        mapInfoHander() {
            if (!this.mapName) {
                this.$message.error('请输入名称！')
                return false
            }
            if (this.mapAddress == '请选择地点') {
                this.$message.error('请先搜索并选择地点！')
                return false
            }
            this.mapAdderssItems.push({
                addressName: this.mapName,
                address: this.mapAddress
            })
            this.ruleForm.addressName = this.mapName
            this.ruleForm.address = this.mapAddress
            this.ruleForm.lat = this.poit[0]
            this.ruleForm.lng = this.poit[1]
            this.mapOpen = false;
            this.addressName = ''
            this.address = ''
            this.markers = []
            console.log(this.ruleForm)
        },
        // 地理位置删除
        delMapInfoHander() {
            this.mapAdderssItems = []
        },
        // 数据处理函数
        // 工作日数据处理
        workdays(val, st) {
            let lat = []
            if (typeof val == 'string') {
                val = val.split(',')
            }
            if (val && val.length > 0) {
                val.forEach((n, i) => {
                    if (n == st) {
                        switch (i) {
                            case 0:
                                lat.push('一')
                                break
                            case 1:
                                lat.push('二')
                                break
                            case 2:
                                lat.push('三')
                                break
                            case 3:
                                lat.push('四')
                                break
                            case 4:
                                lat.push('五')
                                break
                            case 5:
                                lat.push('六')
                                break
                            case 6:
                                lat.push('日')
                                break
                        }
                    }
                })
            }

            return lat.join('、')
        },
        // workDays 数据处理
        workDaysComplate(obj) {
            let workArr = []
            for (let i = 1; i <= 7; i++) {
                if (obj.indexOf(String(i)) != -1) {
                    workArr.push(1)
                } else {
                    workArr.push(0)
                }
            }
            return workArr
        },
        // 特殊日期数据处理
        extraConfigComplate() {
            let arr = []
            this.mustCardsDateItem.forEach(n => {
                let dat = {
                    setDate: n,
                    requiredAttend: 1
                }
                arr.push(dat)
            })
            this.nonCardsDateItem.forEach(n => {
                let dat = {
                    setDate: n,
                    requiredAttend: 0
                }
                arr.push(dat)
            })
            return arr
        }

    }
}
</script>

<style lang="scss">
.adminContent {

    .el-table thead th,
    .el-table thead tr {
        background: #edeffd;
    }

    .pageList {
        text-align: right;
        padding: 10px 0;

        .el-pager li {
            margin: 0 5px;
            min-width: 28px;
            width: 28px;
        }

        .active {
            background: #3345ff;
            border-radius: 100%;
            color: #fff;
        }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #3345ff;
        border-color: #3345ff;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #606266;
    }

    .search-tips {
        min-width: 200px;
        box-shadow: 0 0 4px #ccc;
        border: none !important;
        margin-top: 4px;

        li {
            border: none;
        }
    }
}
</style>
<style lang="scss" scoped>
.dashboard {
    &-container {
        .adminContent {
            .title {
                text-align: center;
                padding: 0 15px;
                line-height: 40px;
                background: #eceffc;
            }

            .butList {
                padding: 0 20px;
                cursor: pointer;
                color: #3345ff;
                font-size: 14px;
                line-height: 50px;

                span {
                    display: inline-block;
                    position: relative;
                    top: -1px;
                    text-align: center;
                    font-weight: bold;
                    margin-right: 2px;
                    color: #fff;
                    background: #3345ff;
                    line-height: 12px;
                    height: 14px;
                    width: 14px;
                    border-radius: 100%;
                }
            }

            .cont {
                padding: 0 20px;

                .tableCont {
                    background: #fff;

                    p {
                        margin: 0px;
                    }
                }

                .titlab {
                    margin: 0 4px;
                    font-size: 12px;
                    border-radius: 4px;
                    padding: 4px 10px;
                }

                .actLab {
                    color: #3345ff;
                    margin: 0 4px;
                    cursor: pointer;
                }
            }

            .itemsLIst {
                display: flex;
                flex-wrap: wrap;
                line-height: 40px;

                .items {
                    width: calc(50% - 5px);
                    display: flex;
                    justify-content: space-between;
                    box-shadow: 2px 2px 10px #e6e6e6;
                    margin: 5px 0;
                    border-radius: 5px;
                    padding: 10px 15px;

                    .lab {
                        display: inline-block;
                        text-align: center;
                        width: 40px;
                        height: 40px;
                        color: #fff;
                        border-radius: 100px;
                        font-size: 22px;
                        margin-right: 10px;
                    }
                }

                .items:nth-child(2n-1) {
                    margin-right: 10px;
                }
            }

            .tit {
                line-height: 50px;
            }

            .dialog-footer {
                display: flex;
                justify-content: center;
                text-align: center;
                margin-top: 30px;
            }

            .miniInput {
                width: 58px;
                line-height: 17px;
                border-radius: 3px;
                font-size: 12px;
                border: solid 1px #ccc;
                padding: 3px 4px;
            }

            .addLab {
                background: #3345ff;
                color: #fff;
                padding: 4px 10px;
                border-radius: 3px;
                font-size: 12px;
                cursor: pointer;
            }

            .table {
                width: 400px;
                border-radius: 3px;
                box-shadow: 0px 0px 4px #ccc;

                .tbHead {
                    background: #eceffc;
                    display: flex;
                    text-align: center;

                    div {
                        flex: 1;
                    }
                }

                .tbTr {
                    display: flex;
                    text-align: center;

                    div {
                        flex: 1;
                    }

                    .act {
                        cursor: pointer;
                        color: #3345ff;
                    }
                }
            }

            .address {
                color: #3345ff;
                cursor: pointer;
                margin-right: 10px;
            }

            .map {
                background: #fff;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                margin-bottom: 20px;
                position: relative;

                .amap {
                    height: 300px;
                    border-radius: 3px;
                }

                .search-box {
                    position: absolute;
                    top: 25px;
                    right: 20px;
                    width: 200px;
                    height: 35px;
                    border-radius: 3px;
                    box-shadow: 0 0 4px #ccc;
                }

                .markerLab {
                    display: inline-block;
                    text-align: center;

                    .icon {
                        color: #ff0000;
                        font-size: 32px;
                        text-shadow: 0 0 4px #ccc;
                    }
                }

                .amap-page-container {
                    position: relative;
                }

                .mapFoot {
                    padding: 15px;
                    display: flex;
                    justify-content: space-between;

                    input {
                        border-radius: 3px;
                        border: solid 1px #e8e9ea;
                        padding: 2px 5px;
                    }

                    .botItem {
                        display: flex;
                        align-items: center;
                    }

                    .cancelSub,
                    .confirmSub {
                        border: solid 1px #3345ff;
                        color: #3345ff;
                        border-radius: 3px;
                        cursor: pointer;
                        margin: 10px;
                        padding: 4px 10px;
                    }

                    .confirmSub {
                        color: #fff;
                        background: #3345ff;
                    }
                }
            }

            .submitBox {
                display: flex;
                justify-content: center;
                margin-top: 20px;

                .submit {
                    background: #3345ff;
                    border-color: #3345ff;
                }
            }

            .addressItems {
                box-shadow: 0px 0px 4px #ccc;
                border-radius: 3px;
                line-height: 25px;
                width: 400px;
                margin-left: 142px;

                .icon {
                    color: #f00;
                }

                .addTit {
                    border-bottom: solid 1px #ccc;
                    padding: 10px 15px;
                }

                .addItems {
                    padding: 10px 15px;
                    display: flex;
                    justify-content: space-between;

                    p {
                        margin: 0;
                        padding: 0;

                        .icon {
                            font-size: 14px;
                        }
                    }

                    .del {
                        text-align: right;
                        display: flex;
                        align-items: center;
                        color: #3345ff;
                    }
                }

                .addDes {
                    color: #999;
                }
            }
        }
    }
}
</style>
